<template>
  <button 
    :class="[
      'flex flex-col items-center justify-center w-16 h-12 transition-all duration-200',
      isActive ? 'opacity-100' : 'opacity-50'
    ]"
    @click="$emit('click')"
  >
    <img :src="item.icon" :alt="item.label" class="w-5 h-5 mb-1">
    <span 
      :class="[
        'text-xs font-poppins font-semibold',
        isActive ? 'text-black' : 'text-transparent bg-clip-text bg-black'
      ]"
    >
      {{ item.label }}
    </span>
  </button>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>